Skip to content

fix(drawer): prevent TypeError when toggling with uninstantiated open drawer - #43326

Open
ShakilUrRehman21 wants to merge 2 commits into
twbs:mainfrom
ShakilUrRehman21:fix/drawer-unhandled-null-on-toggle
Open

ShakilUrRehman21 wants to merge 2 commits into
twbs:mainfrom
ShakilUrRehman21:fix/drawer-unhandled-null-on-toggle

Conversation

@ShakilUrRehman21

Copy link
Copy Markdown
Contributor

Description

When a user clicks a drawer toggle button, the click handler closes any currently open drawer.
However, it previously called Drawer.getInstance(alreadyOpen)!.hide().
If the open drawer was not instantiated yet, getInstance() returned null.
The forced non-null assertion caused an unhandled TypeError: Cannot read properties of null (reading 'hide').
This issue occurred with server-rendered dialogs, native .showModal() calls, or drawer switches.

Additionally:

  • The selector previously only matched dialog.drawer[open], ignoring responsive drawers like .md:drawer.
  • If the toggle selector targeted an invalid or missing element, target was null.

Solution

  1. Use Drawer.getOrCreateInstance(alreadyOpen).hide() instead of Drawer.getInstance(alreadyOpen)!.hide().
  2. Use SELECTOR_OPEN so responsive open drawers are also matched.
  3. Add a guard if (!target || isDisabled(this)) return to handle missing targets safely.

Motivation and Context

Fixes an unhandled JavaScript crash during drawer toggle interactions. Matches the safe instance resolution pattern used in js/src/dialog.ts.

How Has This Been Tested?

  • Added automated unit tests in js/tests/unit/drawer.spec.js:
    • should not throw if another open drawer does not have a Drawer instance yet
    • should call hide first if another responsive drawer is open
    • should not throw if target element does not exist
  • Ran Vitest suite: 70 passed out of 70 tests.
  • Ran npm run js-lint: 0 errors.
  • Ran npm run js-typecheck: 0 errors.

@ShakilUrRehman21
ShakilUrRehman21 requested a review from a team as a code owner November 8, 2026 11:38
@netlify

netlify Bot commented Nov 8, 2026

Copy link
Copy Markdown

✅ Deploy Preview for twbs-bootstrap ready!

Name Link
🔨 Latest commit 0cb6bb4
🔍 Latest deploy log https://app.netlify.com/projects/twbs-bootstrap/deploys/6af05f2c328a0193ff2cd4d7
😎 Deploy Preview https://deploy-preview-43326--twbs-bootstrap.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@julien-deramond julien-deramond added v6 v6, the main branch bug Something does not work as documented js JavaScript or TypeScript sources and plugins labels Nov 8, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something does not work as documented js JavaScript or TypeScript sources and plugins v6 v6, the main branch

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants